@charset "UTF-8";
//暗夜黑
$theme-0: (title-color:#fff,
    font-color: #B4BCCC,
    open-bg:#fff,
    hover-ft: #fff,
    hover-bg:#10162E,
    active-bg:#2985F7,
    active-ft:#fff,
    active-bol:#2985F7,
    sm-active-bg:#2985F7,
    sm-active-ft:#fff,
    sm-hover-bg:#10162E,
    sm-hover-ft:#fff,
    sm-bg:#1B213B,
    sm-ft:#B4BCCC,
    background-color:#252D47,
    bg2-color:#1B213B);

//清新白
$theme-1: (font-color: #000,
    open-bg:#2985F7,
    hover-ft: #2985F7,
    hover-bg:#EAF3FE,
    active-bg:#2985F7,
    active-ft:#fff,
    active-bol:#2985F7,
    sm-active-bg:#2985F7,
    sm-active-ft:#fff,
    sm-hover-bg:#EAF3FE,
    sm-hover-ft:#2985F7,
    sm-bg:#fff,
    sm-ft:#000,
    background-color:#fff,
    bg2-color:#F4F7FD);

//紫罗兰
$theme-2: (font-color: #fff,
    hover-ft: #fff,
    hover-bg:#4F55D2,
    active-bg:#868FFF,
    active-ft:#fff,
    active-bol:#fff,
    sm-active-bg:#5F67EC,
    sm-active-ft:#fff,
    sm-hover-bg:#EFF0FD,
    sm-hover-ft:#5F67EC,
    sm-bg:#fff,
    sm-ft:#000,
    background-color:#5F67EC,
    bg2-color:#565DD5);

//极客蓝
$theme-3: (font-color: #fff,
    hover-ft: #fff,
    hover-bg:#1F70DC,
    active-bg:#579EFF,
    active-ft:#fff,
    active-bol:#fff,
    sm-active-bg:#2985F7,
    sm-active-ft:#fff,
    sm-hover-bg:#EAF3FE,
    sm-hover-ft:#2985F7,
    sm-bg:#fff,
    sm-ft:#000,
    background-color:#2985F7,
    bg2-color:#2578DF);

//叶兰绿
$theme-4: (font-color: #fff,
    hover-ft: #fff,
    hover-bg:#00A2B9,
    active-bg:#05D6ED,
    active-ft:#fff,
    active-bol:#fff,
    sm-active-bg:#00BCD4,
    sm-active-ft:#fff,
    sm-hover-bg:#E6F8FB,
    sm-hover-ft:#00BCD4,
    sm-bg:#fff,
    sm-ft:#000,
    background-color:#00BCD4,
    bg2-color:#00AABF);

//中国红
$theme-5: (font-color: #fff,
    hover-ft: #fff,
    hover-bg:#AE1111,
    active-bg:#E13535,
    active-ft:#fff,
    active-bol:#fff,
    sm-active-bg:#CB1C1D,
    sm-active-ft:#fff,
    sm-hover-bg:#FAE9E9,
    sm-hover-ft:#CB1C1D,
    sm-bg:#fff,
    sm-ft:#000,
    background-color:#CB1C1D,
    bg2-color:#B7191A);

//渐变紫罗兰
$theme-6: (font-color: #fff,
    hover-ft: #fff,
    hover-bg:rgba(0, 0, 0, 0.15),
    active-bg:rgba(255,255,255,.3),
    active-ft:#fff,

    active-bol:#fff,
    sm-active-bg:#9550fa,
    sm-active-ft:#fff,
    sm-hover-bg:#EFF0FD,
    sm-hover-ft:#9550fa,
    sm-bg:#fff,
    sm-ft:#000,

    background-color:linear-gradient(135deg, #806AFE, #A934F5),
    bg2-color:rgba(0, 0, 0, 0.1));

//渐变极客蓝
$theme-7: (font-color: #fff,
    hover-ft: #fff,
    hover-bg:rgba(0, 0, 0, 0.15),
    active-bg:rgba(255,255,255,.3),
    active-ft:#fff,

    active-bol:#fff,
    sm-active-bg:#2985F7,
    sm-active-ft:#fff,
    sm-hover-bg:#EAF3FE,
    sm-hover-ft:#2985F7,
    sm-bg:#fff,
    sm-ft:#000,

    background-color:linear-gradient(135deg, #0055FD, #00D1FE),
    bg2-color:rgba(0, 0, 0, 0.1));

//定义映射集合
$themes: (0: $theme-0,
    1:$theme-1,
    2:$theme-2,
    3:$theme-3,
    4:$theme-4,
    5:$theme-5,
    6:$theme-6,
    7:$theme-7);

@mixin themify($themes: $themes) {

    @each $theme-name,
    $map in $themes {

        // & 表示父级元素
        // !global 表示覆盖原来的
        &[theme="#{$theme-name}"] {
            $theme-map: () !global;

            // 循环合并键值对
            @each $key,
            $value in $map {
                $theme-map: map-merge($theme-map, ($key: $value)) !global;
            }

            // 表示包含 下面函数 themed()
            @content;
            $theme-map: null !global;
        }
    }
}

@function themed($key) {
    @return map-get($theme-map, $key);
}